<template>
  <commonDialog :model-value="modelValue" @close="cancel" @save="save" title="类型信息" :close-on-press-escape="false"
                :close-on-click-modal="false"
                :show-close="false">
    <el-form ref="formRef" :model="request" :rules="mapRules">
      <el-form-item label="名称" prop="value">
        <el-input v-model="request.value" placeholder="请输入名称" clearable></el-input>
      </el-form-item>
    </el-form>
  </commonDialog>
</template>

<script>
import { onBeforeMount, ref, toRefs } from 'vue'
import { addMapUrl } from '@/api/api'
import { post } from '@/utils/httpRequest'
import { ElMessage } from 'element-plus'
import { mapRules } from '@/utils/verifyForm'

export default {
  name: 'map',
  emits: ['update:modelValue', 'save'],
  setup (props, { emit }) {
    const { type } = toRefs(props)
    const cancel = () => {
      emit('update:modelValue', false)
    }
    const formRef = ref(null)
    const save = () => {
      formRef.value.validate().then(async () => {
        const result = await post(addMapUrl, request.value)
        if (result.code === 200) {
          ElMessage.success('保存成功')
          emit('save')
          cancel()
        }
      })
    }
    const request = ref({
      type: 1,
      value: ''
    })
    onBeforeMount(() => {
      request.value.type = type.value
    })
    return {
      formRef,
      cancel,
      save,
      request,
      mapRules
    }
  },
  props: {
    modelValue: {
      required: false,
      type: Boolean,
      default: false
    },
    type: {
      required: true,
      type: Number
    }
  }
}
</script>

<style scoped>

</style>
